<template>
    <div :style="domCss"
         class="buttonShow">
        <button class="Avie_btn_confirm"
                v-if="!disabled || controlType !=='see'"
                @click="Change('click')"
                type="button">{{ buttonName }}</button>
        <div class="show">
            <button class="Avie_tag_active"
                    v-for="(item, i) in list"
                    :key="i"
                    type="button">{{item[defaultProps.label]}} <i class="el-icon-close" v-if="!disabled  || controlType !=='see'"
                   @click="handleRemove(i)"></i></button>
        </div>

    </div>
</template>

<script>
export default {
    props: {
        buttonName: {
            type: String,
            default: ''
        },
        defaultProps: {
            type: Object,
            default: () => {return {
                label: 'label',
                value: 'value',
            }}
        },
        disabled: {
            type: Boolean,
            default: false
        },
        domCss: {
            type: String,
            default: ''
        },
        defaultValue: {
            type: Array,
            default: () => []
        },
        controlType: {
            type: String,
            default: 'add'
        }
    },
    data() {
        return {
            list: []
        }
    },
    watch: {
        defaultValue: {
            deep: true,
            immediate: true,
            handler: function(v) {
                this.list = v
            }
        }
    },
    methods: {
        handleRemove(index) {
            let arr =[]
            this.list.map((el,Index) => {
                if (index != Index) {
                    arr.push(el)
                }
            });
            this.list = arr
        },
        Change(type) {
            this.$emit("EventHandler", type, this.$attrs.prop, this.list);
        }
    },
    destroyed(){
    }
};
</script>
<style lang="scss" scoped>
.buttonShow {
    display: inline-block;
}
.show {
    margin-top: 8px;
    .Avie_tag_active {
        margin-right: 8px;
        min-width: unset;
        padding: 0 15px;
        cursor: default;
        i {
            cursor: pointer;
        }
    }
}
</style>